<template>
  <div>
    <van-nav-bar
      title="商品分类"
      left-arrow
      placeholder
      fixed
      @click-left="goBack"
      @click-right="searchClick"
      v-if="searchShow"
    >
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <van-field
      v-else
      autofocus
      v-model="queryInfo.title"
      left-icon="search"
      placeholder="请填写搜索内容"
      @blur="serachBlur"
    />
    <van-sidebar v-model="active" class="aside">
      <van-collapse v-model="activeNames" accordion>
        <van-collapse-item
          :title="item.name"
          v-for="item in asideList"
          :key="item.id"
        >
          <van-sidebar-item
            :title="item1.name"
            v-for="item1 in item.children"
            :key="item1.id"
            @click="sidebarItemClick(item1.id)"
          />
        </van-collapse-item>
      </van-collapse>
    </van-sidebar>
    <div class="cate-goods">
      <van-list
        v-model:loading="listLoading"
        :finished="listFinished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-tabs
          v-model:active="tabsActive"
          sticky
          offset-top="47px"
          @click="tabsClick"
        >
          <van-pull-refresh v-model="puLoading" @refresh="onRefresh">
            <van-tab
              :title="item"
              v-for="(item, index) in tabsTitles"
              :key="index"
            >
              <van-card
                v-for="item in goodsList"
                :key="item.id"
                :tag="item.collects_count > 1 ? '流行' : ''"
                :num="item.sales"
                :price="item.price"
                :desc="item.updated_at"
                :title="item.title"
                :thumb="item.cover_url"
                @click="goodsClick(item.id)"
              />
            </van-tab>
          </van-pull-refresh>
        </van-tabs>
      </van-list>
    </div>
    <back-top></back-top>
  </div>
</template>
<script>
import { useRouter } from 'vue-router'
import { onMounted, reactive, toRefs } from 'vue'
import { getCateInfo } from '../../network/category'
import BackTop from '../../components/common/BackTop.vue'
export default {
  components: {
    BackTop
  },
  setup () {
    const router = useRouter()
    const state = reactive({
      queryInfo: {
        page: 1,
        title: '',
        category_id: 0,
        sales: 1,
        recommend: 0,
        price: 0,
        comments_count: 0
      },
      asideList: [],
      activeNames: '',
      active: 0,
      tabsActive: 0,
      tabsTitles: ['销量排序', '价格排序', '评论排序'],
      goodsList: [],
      listLoading: false,
      listFinished: false,
      puLoading: false,
      searchShow: true
    })
    onMounted(() => {
    })
    const goBack = () => {
      router.go(-1)
    }
    const getCateInfoFn = () => {
      getCateInfo(state.queryInfo).then(res => {
        console.log(res)
        state.asideList = res.categories
        if (state.queryInfo.page > 1) {
          state.goodsList.push(...res.goods.data)
          state.queryInfo.page++
          state.listLoading = false
          if (res.goods.data.length === 0) {
            state.listFinished = true
          }
        } else {
          state.goodsList = res.goods.data
          state.queryInfo.page++
          state.listLoading = false
          state.puLoading = false
        }
      })
    }
    const tabsClick = () => {
      state.queryInfo.sales = state.queryInfo.price = state.queryInfo.comments_count = 0
      state.queryInfo.page = 1
      if (state.tabsActive === 0) {
        state.queryInfo.sales = 1
      } else if (state.tabsActive === 1) {
        state.queryInfo.price = 1
      } else if (state.tabsActive === 1) {
        state.queryInfo.comments_count = 1
      }
      getCateInfoFn()
    }
    const onLoad = () => {
      state.listLoading = true
      getCateInfoFn()
    }
    const onRefresh = () => {
      state.queryInfo.page = 1
      getCateInfoFn()
    }
    const sidebarItemClick = (categoryId) => {
      state.queryInfo.page = 1
      state.queryInfo.category_id = categoryId
      getCateInfoFn()
    }
    const goodsClick = (goodsId) => {
      router.push({ path: '/detail', query: { id: goodsId } })
    }
    const searchClick = () => {
      state.searchShow = false
    }
    const serachBlur = () => {
      state.searchShow = true
      state.queryInfo.page = 1
      getCateInfoFn()
      state.queryInfo.title = ''
    }
    return {
      ...toRefs(state),
      goBack,
      tabsClick,
      onLoad,
      onRefresh,
      sidebarItemClick,
      goodsClick,
      searchClick,
      serachBlur
    }
  }
}
</script>
<style scoped>
.aside {
  position: fixed;
  top: 110px;
  left: 0;
  width: 130px;
}
.cate-goods {
  margin-left: 140px;
}
.van-card {
  margin-top: 15px;
}
.van-field {
  position: fixed;
  top: 0;
  background-color: #fff;
  height: 47px;
  z-index: 1;
}
</style>
